<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ a }}</p>
        <p>{{ b }}</p>
    </div>

    <script>
        var objData = { a: 1 }
        var vm = new Vue({
            el: "#app",
            data: objData,
            // 此处只是把data对象写在了外面，效果和下面一样的
            // data: {
            //     a: 1
            // }
        })

        vm.a == objData.a // => true

        vm.a = 2
        objData.a // => 2

        objData.a = 3
        vm.a // => 3

        // ----------------------
        // 但是，只有当实例被创建时就已经存在于 data 中的 property 才是响应式的
        vm.b = 'hi' // => 报错
        objData.b // => undefined
        objData.b = 'hello'
        vm.b // => hi
        // 如上，vm 改变，并不会使得 data 改变，即不是响应式
        // 所以你需要一个 property，但是一开始它为空或不存在，那么你仅需要在 data 设置一些初始值。
        objData.c = ''

        // ----------------------
        // Vue 实例暴露了一些有用的实例 property 与方法，它们都有前缀 $，以便与用户定义的 property（如vm.a）区分开来
        vm.$data === objData // => true
        vm.$el === document.getElementById('app') // => true
        // $watch 是一个实例方法
        vm.$watch('a', function (newValue, oldValue) {
            // 此回调将在 `vm.a` 改变后调用
        })

        // 在 new Vue里，则是 this 相当于 vm
    </script>
</body>

</html>